<template>
    <div>
      <div>
        <div class="title">
          <RouterLink to="/user">
            <button>&lt</button>
          </RouterLink>
          <h1>我的兼职</h1>
        </div>
      </div>
      <nav>
        <div
          class="quanb"
          @click="dj(0)"
          :style="{ borderBottom: stylelist[0].bb }"
        >
          全部
        </div>
        <div
          class="baoming"
          @click="dj(1)"
          :style="{ borderBottom: stylelist[1].bb }"
        >
          已报名
        </div>
        <div
          class="luqu"
          @click="dj(2)"
          :style="{ borderBottom: stylelist[2].bb }"
        >
          已录取
        </div>
        <div
          class="jujue"
          @click="dj(3)"
          :style="{ borderBottom: stylelist[3].bb }"
        >
          已拒绝
        </div>
      </nav>
      <div class="jzbody">
        <div v-if="list.length == 0">
          <img src="../assets/null.bmp" alt="" />
        </div>
        <div class="jzlist" v-for="item in list" :key="item">
          <h3>
            {{ item.title }}
            <span v-if="item.employ == 0" class="jingpin">急聘</span>
            <span v-else class="ziying">自营</span>
          </h3>
          <div class="product-meta">
            <span class="iconfont icon-dingwei2"></span>
            <span>{{ item.county }}</span>
            <span class="iconfont icon-clock"></span>
            <span>{{ item.work }}</span>
          </div>
          <div class="negotiable">
            <span>
              <b>{{ item.salary }}</b>
              {{ item.salaryStatus }}
            </span>
            <span class="line">{{ item.settlement }}</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, watch, reactive } from "vue";
  import { RouterLink } from "vue-router";
  import { myjz } from "../api/myjz.js";
  let num = ref(0);
  let list = ref([]);
  let stylelist = reactive([
    {
      bb: "2px solid #ff6600",
    },
    {
      bb: "0",
    },
    {
      bb: "0",
    },
    {
      bb: "0",
    },
  ]);
  myjz().then((res: any) => {
    list.value.length = 0;
    res.forEach((item: any) => {
      list.value.push(item);
    });
    console.log(list.value);
  });
  let dj = (page: number) => {
    num.value = page;
    if (page == 0 || page == 1) {
      list.value.length = 0;
      myjz().then((res: any) => {
        res.forEach((item: any) => {
          list.value.push(item);
        });
        console.log(list.value);
      });
    } else {
      list.value.length = 0;
    }
  };
  watch(num, (nv, ov) => {
    stylelist[nv].bb = "2px solid #ff6600";
    stylelist[ov].bb = "0";
  });
  </script>
  
  <style lang="scss" scoped>
  .title {
    height: 44px;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    button {
      float: left;
      height: 43px;
      border: 0;
      font-size: 22px;
      background-color: #fff;
      color: #646464;
      position: absolute;
    }
    h1 {
      text-align: center;
      margin: 0;
      font-size: 18px;
      line-height: 44px;
      font-weight: 700;
    }
  }
  nav {
    height: 44px;
    display: flex;
    div {
      line-height: 44px;
      text-align: center;
      float: left;
      flex: 1;
    }
  }
  .jzbody {
    background-color: #f7f7f7;
    height: 521px;
    text-align: center;
  }
  .jzlist {
    border-top: 1px solid #f5f5f5;
    height: 98px;
    background-color: #fff;
    padding: 12px;
    h3 {
      text-align: start;
      font-size: 16px;
      font-weight: 700;
      color: #404040;
      span {
        font-size: 12px;
        padding: 2px;
      }
      .jingpin {
        color: #ffc1b4;
        border: 1px solid #ffc1b4;
      }
      .ziying {
        color: #ffc480;
  
        border: 1px solid #ffc480;
      }
    }
    .product-meta {
      text-align: start;
      span {
        font-size: 12px;
        margin-right: 3px;
        color: #808080;
      }
    }
    .negotiable {
      height: 20px;
      margin-top: 8px;
      text-align: start;
      font-size: 12px;
      span {
        b {
          font-size: 14px;
          color: #ff6600;
        }
      }
      .line::before {
        content: "|";
        margin: 2px 5px;
        color: #cfcfcf;
      }
    }
  }
  </style>
  